<template>
  <div class="childentity-tree">
    <el-scrollbar height="400px">
      <el-tree
        show-checkbox
        node-key="id"
        :data="entityTreeData"
        :props="entityTreeProps"
        v-loading="isLoading"
        @node-click="nodeClickHandle"
        @check="checkHandle"
      />
    </el-scrollbar>
  </div>
</template>

<script>
import geoEntityManagerApi from "@/views/js/api/geoEntityDataApi";

export default {
  name: "ChildEntityTree",
  props: {
    viewModel: {
      type: Object,
      default: null,
    },
    queryParams: {
      type: Object,
      default: {
        dlstbsm: "",
        tybsm: "",
      },
    },
  },
  data() {
    return {
      entityTreeData: [],
      entityTreeProps: {
        label: "label",
        children: "childEntityList",
      },
      isLoading: false,
    };
  },
  watch: {
    queryParams: {
      handler: function () {
        this.showTree();
      },
    },
  },
  mounted() {
    this.showTree();

    this.preCheckedNodes = [];
  },
  methods: {
    nodeClickHandle() {},

    // 节点勾选事件
    async checkHandle(checkNode, checkStatus) {
      function getDiff(preArr, postArr) {
        const addDiff = postArr.filter(post => {
          let findItem = preArr.find(pre => pre.id === post.id);
          return !findItem;
        });
        const deleteDiff = preArr.filter(pre => {
          let findItem = postArr.find(post => post.id === pre.id);
          return !findItem;
        });
        return {
          add: addDiff,
          delete: deleteDiff,
        };
      }

      let checkedLeafNodes = [];
      for (const checkedNode of checkStatus.checkedNodes) {
        if (!checkedNode.childEntityList) {
          checkedLeafNodes.push(checkedNode);
        }
      }
      const diff = getDiff(this.preCheckedNodes, checkedLeafNodes);
      this.viewModel.addEntitys(diff.add).then(result=>{
        if(!result){
          this.$message.error("图形加载失败，详情请查看控制台！");
        }
      });
      this.viewModel.removeEntitys(diff.delete);
      this.preCheckedNodes = checkedLeafNodes;
    },

    async showTree() {
      if (!this.queryParams) {
        return false;
      }
      this.entityTreeData = [];
      let result = false;
      if (this.queryParams.dlstbsm) {
        result = await this.showTreeByDlstbsm(this.queryParams.dlstbsm);
        if (result) {
          return true;
        }
      }
      if (this.queryParams.tybsm) {
        result = await this.showTreeByTybsm(this.queryParams.tybsm);
      }
      if (!result) {
        this.$message.error("获取地理实体失败！");
      }
      return result;
    },

    async showTreeByDlstbsm(dlstbsm) {
      this.isLoading = true;
      const entity = await geoEntityManagerApi
        .getEntityByDlstbsm(dlstbsm)
        .then(response => {
          if (!response.content) {
            return null;
          }
          return response.content;
        })
        .catch(error => {
          console.error(error);
          return null;
        });
      this.isLoading = false;
      if (!entity) {
        return false;
      }
      let idNo = 1;
      for (const item of entity.childEntityList) {
        item.id = idNo++;
        item.label = `${item.categoryName}[${item.childEntityTotal}]`;
        for (const childItem of item.childEntityList) {
          childItem.id = childItem.tybsm;
          childItem.label = childItem.dlstmc;
        }
      }
      this.entityTreeData = entity.childEntityList;
      return true;
    },

    async showTreeByTybsm(tybsm) {
      this.isLoading = true;
      const entity = await geoEntityManagerApi
        .getEntityByTybsm(tybsm)
        .then(response => {
          if (!response.content) {
            return null;
          }
          return response.content;
        })
        .catch(error => {
          console.error(error);
          return null;
        });
      this.isLoading = false;
      if (!entity) {
        return false;
      }
      let idNo = 1;
      for (const item of entity.childEntityList) {
        item.id = idNo++;
        item.label = `${item.categoryName}[${item.childEntityTotal}]`;
        for (const childItem of item.childEntityList) {
          childItem.id = childItem.tybsm;
          childItem.label = childItem.dlstmc;
        }
      }
      this.entityTreeData = entity.childEntityList;
      return true;
    },
  },
};
</script>

<style lang="scss" scoped>
.childentity-tree {
  .el-tree {
    height: 400px;
    background: transparent;
    color: #fff;
    --el-tree-node-hover-bg-color: #67676e;
  }
  ::v-deep .el-form-item__label {
    color: #ffffff;
  }
  ::v-deep .el-checkbox {
    color: #ffffff;
  }
  ::v-deep .el-loading-mask {
    background-color: transparent;
  }
}
</style>
